<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="include-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<body>
<%@include file="include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="modal-menu-add.jsp"%>
<%@include file="modal-menu-confirm.jsp"%>
<%@include file="modal-menu-edit.jsp"%>
<script>
    $(function () {


        // 调用封装好的函数初始化树形结构
        generateTree();

        $("#treeDemo").on("click",".addBtn",function () {
            // 当前节点的id就是新节点的pid
            window.pid = this.id;

            $("#menuAddModal").modal("show")

            return false;
        });

        // 给模态框的保存按钮绑定单击函数
        $("#menuSaveBtn").click(function () {
            // 收集表单的数据
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());
            var icon = $.trim($("#menuAddModal [name=icon]:checked").val());

            // 发送ajax请求
            $.ajax({
                url:'menu/save',
                type:'post',
                data:{
                    pid:window.pid,
                    name:name,
                    url:url,
                    icon:icon
                },
                dataType:'json',
                success:function (res) {
                    if(res.result == "SUCCESS"){
                        layer.msg("操作成功");

                        // 成功刷新之后刷新树形结构
                        generateTree();
                    }
                    if(res.result == "ERROR"){
                        layer.msg("操作失败:"+res.message);
                    }
                },
                error:function (res) {
                    layer.msg(res.statusText+"状态码:"+res.status)
                }
            })
            $("#menuAddModal").modal("hide")

            // 清空表单
            $("#menuResetBtn").click();

        })

        // 编辑按钮绑定函数
        $("#treeDemo").on("click",".editBtn",function () {
            // 将当前节点的id保存
            window.id = this.id;

            $("#menuEditModal").modal("show");

            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            //用来搜索节点的属性名
            var key = "id";
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key,value);

            //回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);

            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            return false;
        });
        
        // 更新按钮绑定单击函数
        $("#menuEditBtn").click(function () {
            // 收集表单数据
            var name = $("#menuEditModal [name=name]").val();
            var url = $("#menuEditModal [name=url]").val();

            var icon = $("#menuEditModal [name=icon]:checked").val();

            $.ajax({
                url:'menu/update',
                type:'post',
                data:{
                    id:window.id,
                    name:name,
                    url:url,
                    icon:icon
                },
                dataType:'json',
                success:function (res) {
                    if(res.result == "SUCCESS"){
                        layer.msg("操作成功");

                        // 成功刷新之后刷新树形结构
                        generateTree();
                    }
                    if(res.result == "ERROR"){
                        layer.msg("操作失败:"+res.message);
                    }
                },
                error:function (res) {
                    layer.msg(res.statusText+"状态码:"+res.status)
                }
            })
            $("#menuEditModal").modal("hide")

        })
        $("#treeDemo").on("click",".removeBtn",function(){
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuConfirmModal").modal("show");

            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            var key = "id";
            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key, value);
            console.log(currentNode)
            $("#removeNodeSpan").html("【<i class='"+currentNode.icon+"'></i>"+currentNode.name+"】");
            return false;
        })
        $("#confirmBtn").click(function () {
            $.ajax({
                url:'menu/remove',
                type:'post',
                data:{
                    id:window.id,
                },
                dataType:'json',
                success:function (res) {
                    if(res.result == "SUCCESS"){
                        layer.msg("操作成功");

                        // 成功刷新之后刷新树形结构
                        generateTree();
                    }
                    if(res.result == "ERROR"){
                        layer.msg("操作失败:"+res.message);
                    }
                },
                error:function (res) {
                    layer.msg(res.statusText+"状态码:"+res.status)
                }
            })
            $("#menuConfirmModal").modal("hide")
        })

    })
</script>
</body>
</html>
